<template lang="pug">
  div
    v-dialog(v-model="active" max-width="70vw")
      CriterionFilterResult(ref="filterResult" :criterion="criterion")
    v-data-table( :headers="headers"
      v-model="selected"
      show-select
      :options.sync="options"
      :items="items"
      loading-text="数据加载中..."
      no-data-text="未找到数据"
      :server-items-length="totalItems"
      :footer-props="footerProps"
      :loading="isLoading"
    )
      template(v-slot:item.action='{ item }')
        v-btn( depressed fab dark x-small color="primary" @click="viewFilterResult(item)")
          v-icon(small) mdi-filter-variant
      template(v-slot:item.asset_type='{ item }')
        span {{ lblAssetType(item) }}
      template(v-slot:item.field_name='{ item }')
        span {{ lblFieldName(item) }}
      template(v-slot:item.operator='{ item }')
        span {{ lblOperator(item) }}

</template>

<script lang="ts">
  import Vue from 'vue'
  import mixins from '../mixins/PaginateDataTableMixin'
  import {mapState, mapMutations, mapGetters, mapActions} from 'vuex'
  import {AxiosPromise} from 'axios'
  import {Criterion} from './filterable_bundle_criterion_builder'
  import CriterionFilterResult from './filterable_bundle_criterion_filter_result'

  interface KeyValue {
    [key: string]: string
  }

  const assetTypeMap: KeyValue = {
    'App\\Models\\Asset': '一般资产',
    'App\\Models\\AssetStock': '批量资产'
  }
  const fieldNameMap: KeyValue = {
    'name': '名称',
    'category': '分类'
  }
  const operatorMap: KeyValue = {
    '=': '等于',
    '!=': '不等于',
    'like': '包含',
    'not like': '不包含',
    '>': '大于',
    '<': '小于'
  }
  export default Vue.extend({
    mixins: [mixins],
    props: ['bundle'],
    components: {CriterionFilterResult},
    methods: {
      ...mapActions('filterableBundle', { listCriteria: 'listCriteria' }),
      lblAssetType(val: Criterion) {
        return assetTypeMap[val.asset_type]
      },
      lblFieldName(item: Criterion) {
        return fieldNameMap[item.field_name]
      },
      lblOperator(item: Criterion) {
        return operatorMap[item.operator]
      },
      viewFilterResult(item: Criterion) {
        this.criterion = item
        this.active = true
      },
      fetchData(opt: any): AxiosPromise {
        let payload = {
          id: this.bundle.id,
          data: opt
        }
        return this.listCriteria(payload)
      },
    },
    watch: {
      bundle() {
        this.refresh()
      }
    },
    data() {
      return {
        assetStock: null,
        active: false,
        criterion: {} as Criterion,
        headers: [
          { text: '操作', value: 'action', sortable: false },
          { text: '资产类型', value: 'asset_type' },
          { text: '筛选类型', value: 'field_name' },
          { text: '匹配模式', value: 'operator' },
          { text: '匹配值', value: 'field_value' },
          { text: '数量', value: 'quantity' },
        ]
      }
    }
  })
</script>
